<template>

  <div>
    <div class="title">用来实验交互的页面</div>
    <div class="info">
      <div class="infohead">
        <div class="left">
          <img src="" alt="">
          <span style="font-size:18px">用来实验交互的页面</span>
          <span style="margin-left:10px">{{dataCount}}</span>
        </div>
        <div class="right">
          <Input v-model="searchConName" icon="search" @on-change="handleSearch" placeholder="请输入姓名搜索..." style="width: 200px" />
        </div>
      </div>
      <Table :columns="historyColumns" :data="historyData" :border='true' :loading="isLoading"></Table>
      <Page :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="changepage"></Page>
    </div>

  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      message: "",
      isLoading: true,
      isLoading_1: false,
      histories: [],
      ajaxHistoryData: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      historyColumns: [
        {
          title: "手机号码",
          key: "phone",
          width: 150,
          align: "center"
        },
        {
          title: "姓名",
          key: "uname",
          width: 100,
          align: "center"
        },
        {
          title: "主钱包地址",
          key: "wallet",
          width: 250,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: this.historyData[params.index].wallet,
                    maxWidth: "350"
                  }
                },
                this.hideWord(this.historyData[params.index].wallet)
              )
            ]);
          }
        },
        {
          title: "副钱包地址",
          key: "walletsub",
          width: 250,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: this.historyData[params.index].walletsub,
                    maxWidth: "350"
                  }
                },
                this.hideWord(this.historyData[params.index].walletsub)
              )
            ]);
          }
        },
        {
          title: "UT钱包地址",
          key: "ut_wallet",
          width: 250,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: this.historyData[params.index].ut_wallet,
                    maxWidth: "350"
                  }
                },
                this.hideWord(this.historyData[params.index].ut_wallet)
              )
            ]);
          }
        },
        {
          title: "状态",
          key: "used",
          width: 100,
          align: "center"
        },
        {
          title: "矿机绑定状态",
          key: "kuangjiStates",
          width: 150,
          align: "center"
        },
        {
          title: "分成用户",
          key: "fencheng",
          width: 100,
          align: "center"
        },
        {
          title: "分成比",
          key: "shouyifencheng",
          width: 100,
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 450,
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "15px"
                  },
                  on: {
                    click: () => {
                      this.change(params.index);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "15px"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "15px"
                  },
                  on: {
                    click: () => {
                      this.check(params.index);
                    }
                  }
                },
                "查看设备"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "15px"
                  },
                  on: {
                    click: () => {
                      this.bindSheBei(params);
                    }
                  }
                },
                "绑定设备"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.shouyiMingXi(params.index);
                    }
                  }
                },
                "查看收益"
              )
            ]);
          }
        }
      ],
      loading: true,
      loadingIndex: -1,
      historyData: [],
      searchConName: "",
      searchLen: 0,

      //用来记录用户列表选中了哪一项
      userIndex: 0,
      //操作数据
      searchConName_1: "", //姓名
      searchConPhone: "", //手机号码
      searchConFengcheng: "", //分成比
      searchConSheBei: "", //设备
      searchConMainAddress: "", //主钱包地址
      searchConOtherAddress: "", //副钱包地址
      searchConJieDdian: "", //节点数量
      searchConPosition: "", //地理位置
      panDuanFengCheng: false,
      searchConUserId: "", //用户ID
      changeShow: false, //用来控制修改页面的现实和隐藏
      isSelect: false,

      //查看设备信息
      checkShow: false, //控制查看页面的显示和隐藏
      useID: "",
      color: "dashed", //设备信息按钮
      color_1: "dashed", //挖矿状态按钮
      shebeiBannerShow: -1,
      shebeiNum: [],
      shebeiInforAll: [],
      shebeiInfor: {},
      UserId: "" //用户管理Id
    };
  },
  methods: {
    bindSheBei(params) {
      this.$router.push({
        name: "BindShebei",
        query: {
          param: params.row
        }
      });
    },
    hideWord(string) {
      string = String(string);
      let len = string.length;
      let stringBefore = string.slice(0, 11);
      let stringBeHand = string.slice(len - 10, len + 1);
      let newString = stringBefore + "..." + stringBeHand;
      return newString;
    },
    //表格操作
    //删除操作
    remove(index) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "<div>账户：" + this.historyData[index].uid + "正在删除</div>",
        onOk: () => {
          let param = {};
          param.uid = this.historyData[index].uid;
          this.$axios({
            url: "/miners/delete-user",
            method: "post",
            data: param
          })
            .then(res => {
              this.$Message.success("已删除用户");
              this.histories = [];
              this.isLoading = true;
              this.loadDataUserInfo();
            })
            .catch(err => {
              console.log(err);
            });
        },
        onCancel: () => {
          this.$Message.info("已取消");
        }
      });
      // 需要重新调用后台数据,现在没有写
    },
    //修改操作
    change(index) {
      this.$router.push({
        name: "DetailChangeInfo",
        params: {
          changeData: this.historyData[index]
        }
      });
    },
    //表格操作

    xuan() {
      if (this.panDuanFengCheng == false) {
        this.panDuanFengCheng = true;
      } else {
        this.panDuanFengCheng = false;
      }
    },

    //查看信息操作
    check(index) {
      this.UserId = this.historyData[index].uid;
      this.$router.push({
        name: "DetailCheckInfo",
        query: {
          uidTo: this.historyData[index].uid,
          UserId: this.shebeiNum
        }
      });
      // this.loadDataUserShebeiNum(this.historyData[index].uid);
    },
    shouyiMingXi(index) {
      this.UserId = this.historyData[index].uid;
      this.$router.push({
        name: "MingXiInfo",
        query: {
          uid: this.historyData[index].uid,
          wallet: this.historyData[index].wallet,
          name: this.historyData[index].uname
        }
      });
    },
    // 获取历史记录信息
    handleListApproveHistory(index) {
      // 保存取到的所有数据
      this.ajaxHistoryData = this.histories;
      this.dataCount = this.histories.length;
      // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
      if (this.histories.length < this.pageSize) {
        this.historyData = this.ajaxHistoryData;
      } else {
        this.historyData = this.ajaxHistoryData.slice(index, this.pageSize);
      }
    },
    changepage(index) {
      var _start = (index - 1) * this.pageSize;
      var _end = index * this.pageSize;
      this.historyData = this.ajaxHistoryData.slice(_start, _end);
    },
    handleSearch() {
      //查找单个页面
      // this.handleListApproveHistory();
      // this.historyData = this.search(this.historyData, this.searchConName);

      //查找全部数据
      this.handleListApproveHistory(0);
      this.ajaxHistoryData = this.search(
        this.ajaxHistoryData,
        this.searchConName
      );
      if (this.ajaxHistoryData.length < this.pageSize) {
        this.historyData = this.ajaxHistoryData;
      } else {
        this.historyData = this.ajaxHistoryData.slice(0, this.pageSize);
      }
    },
    search(data, string) {
      this.searchLen = string.length;
      let res = data.filter(this.dofilter);
      return res;
    },

    dofilter(element) {
      if (element.uid.indexOf(this.searchConName) != -1) {
        return true;
      } else if (element.uname.indexOf(this.searchConName) != -1) {
        return true;
      } else if (element.wallet.indexOf(this.searchConName) != -1) {
        return true;
      } else if (element.walletsub.indexOf(this.searchConName) != -1) {
        return true;
      } else {
        return false;
      }
    },
    //加载用户列表数据
    loadDataUserInfo() {
      this.$axios({
        method: "get",
        url: "/miners/load-iot-users"
      })
        .then(res => {
          if (res.status == 200) {
            if (res.data.status == "00000") {
              this.isLoading = false;
              this.histories = res.data.datas;
              //状态和分成用户字段的值进行修改
              this.histories.forEach(function(element) {
                if (element.used == true) {
                  element.used = "启用";
                } else {
                  element.used = "未启用";
                }
                if (element.fencheng == true) {
                  element.fencheng = "是";
                } else {
                  element.fencheng = "否";
                }
                if (element.devs) {
                  element.kuangjiStates = "已绑定";
                } else {
                  element.kuangjiStates = "未绑定";
                }
              });
              this.handleListApproveHistory(0);
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //加载用户设备数量
    loadDataUserShebeiNum(uid) {
      this.shebeiInforAll = [];
      let param = {};
      param["uid"] = uid;
      this.$axios({
        method: "post",
        url: "/miners/load-user-miners",
        data: param
      })
        .then(res => {
          if (res.status == 200) {
            this.isLoading_1 = true;
            if (res.data.status == "00000") {
              this.shebeiNum = res.data.datas;
              this.$router.push({
                name: "DetailCheckInfo",
                query: {
                  shebeiNumTo: this.shebeiNum,
                  UserId: this.shebeiNum
                }
              });
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {},
  mounted() {
    this.loadDataUserInfo();
  }
};
</script>
<style scoped>
.ivu-tooltip-inner {
  width: 350px !important;
  max-width: 350px !important;
}

.ivu-table-header {
  overflow: auto !important;
}

.ivu-table {
  overflow: auto !important;
}

.paging {
  margin-top: 10px;
}

.title {
  color: #666;
  margin: 25px 0;
  font-size: 24px;
}

.info {
  padding: 12px 20px 15px;
  background-color: #fff;
  border: 1px solid #e7ecf1 !important;
}

.infohead {
  min-height: 48px;
  border-bottom: 1px solid #eef1f5;
  line-height: 48px;
  font-size: 18px;
}

.left {
  float: left;
}

.right {
  float: right;
}

title {
  color: #666;
  margin: 25px 0;
  font-size: 24px;
}

.info {
  padding: 12px 20px 15px;
  background-color: #fff;
  border: 1px solid #e7ecf1 !important;
}

.infohead {
  min-height: 48px;
  border-bottom: 1px solid #eef1f5;
  line-height: 48px;
  font-size: 18px;
}

.right {
}

.spanMargin {
  display: inline-block;
  margin-right: 20px;
}

.leftMargin {
  margin-left: 20px;
}

.changeStyle {
  margin-top: 20px;
  border: 1px solid #e7ecf1 !important;
  padding: 12px 20px 15px;
  background-color: #fff;
}

.com {
  margin-bottom: 20px;
}

/* 查看的样式 */
.checkStyle {
  margin-top: 20px;
  border: 1px solid #e7ecf1 !important;
  padding: 12px 20px 15px;
  background-color: #fff;
}

.shebeiBanner {
  clear: both;
  margin-top: 60px;
}

.shebeiBanner span {
  font-size: 18px;
}

.shebeiBanner div {
  font-size: 18px;
  margin-top: 5px;
}

.shebeiBanner ol {
  margin-left: 30px;
}

.shebeiBanner li {
  font-size: 17px;
  font-style: italic;
}

.stateStyle {
  clear: both;
  margin-top: 60px;
}

.ivu-table-wrapper {
  margin-top: 30px;
}

.feng {
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
  margin-bottom: 20px;
  border: 1px solid #e7ecf1 !important;
}

.fengTitle {
  display: flex;
  justify-content: space-between;
}
</style>